<!DOCTYPE html>
<html>
<head>
    <title>Ceadeal 后台管理系统</title>
    <#include "../common/head.ftl"/>
    <link rel="stylesheet" href="/plugin/AdminLTE/plugins/datatables/dataTables.bootstrap.css">
</head>
<body class="cw-body">
<div id="page-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            用户管理
            <small>&nbsp;</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="/main"><i class="fa fa-dashboard"></i> 首页</a></li>
            <li class="active">用户管理</li>
        </ol>
    </section>

    <!-- Main content -->
    <section class="content">
        <!-- Your Page Content Here -->
        <ul class="nav nav-tabs">
            <li role="presentation" class="active"><a href="#">列表</a></li>
            <li role="presentation"><a href="/user/edit">新增</a></li>
            <!-- /... -->
        </ul>

        <!-- box 1 -->
        <div class="box box-primary">
            <div class="box-header with-border">
                <h3 class="box-title"><i class="fa fa-search"></i>&nbsp;搜索条件</h3>
                <div class="box-tools pull-right">
                    <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                </div>
            </div>
            <div class="box-body">
                <!-- SearchTable -->
                <table id="searchTable" class="table table-bordered table-striped table-search">
                    <tr>
                        <td style="width:10%">昵称：</td>
                        <td style="width:15%"><input type="text" class="form-control" id="nickName"/></td>
                        <td style="width:10%">用户名：</td>
                        <td style="width:15%"><input type="text" class="form-control" id="userName"/></td>
                        <td style="width:10%">手机号：</td>
                        <td style="width:15%"><input type="text" class="form-control" id="mobile"/></td>
                        <td style="width:10%">邮箱：</td>
                        <td style="width:15%"><input type="text" class="form-control" id="email"/></td>
                    </tr>
                </table>
            </div>
            <div class="box-footer box-footer-center">
                <button type="button" id="btn_search" class="btn btn-primary btn-control"><i class="fa fa-search"></i>&nbsp;搜&nbsp;索</button>&emsp;
                <button type="button" id="btn_reset" class="btn btn-default btn-control"><i class="fa fa-repeat"></i>&nbsp;重&nbsp;置</button>
            </div>
        </div>

        <!-- box 2 -->
        <div class="box box-primary">
            <div class="box-header with-border">
                <h3 class="box-title"><i class="fa fa-list"></i>&nbsp;搜索结果</h3>
                <div class="box-tools pull-right">
                    <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                </div>
            </div>
            <div class="box-body">
                <!-- DataTable -->
                <table id="dataTable" class="table table-bordered table-striped" class="col-lg-12">
                    <thead>
                    <tr>
                    <#--<th><input id='check-all' name="checkAll" type="checkbox"/></th>-->
                        <th>序号</th>
                        <th>昵称</th>
                        <th>用户名</th>
                        <th>手机号</th>
                        <th>邮箱</th>
                        <th>等级</th>
                        <th>创建时间</th>
                        <th>更新时间</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>

    </section>
    <!-- /.content -->
</div>

<!-- REQUIRED JS SCRIPTS -->
<#include "../common/script-common.ftl"/>
<script src="/plugin/AdminLTE/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="/plugin/AdminLTE/plugins/datatables/dataTables.bootstrap.min.js"></script>
<script src="/js/cdl-datatable.js"></script>
<script>
    var dataTable;
    $(function(){
        dataTable = $('#dataTable').DataTable({
            sorting: [[ 7, "desc" ]], // 初始化排序索引
            ajax: { // 异步请求
                url: "/user/listData",
                method: "POST",
                data: function(data) {
                    __dataDimensionConversion(data); // 数据维度转换，必须调用
                    return $.extend({}, data, {
                        // 自定义附加参数
                        "paramMap[nickName]": $.trim($("#nickName").val()),
                        "paramMap[userName]": $.trim($("#userName").val()),
                        "paramMap[mobile]": $.trim($("#mobile").val()),
                        "paramMap[email]": $.trim($("#email").val())
                    });
                },
                error: ajaxErrorHandler
            },
            columnDefs: [{
                targets: "_all",
                createdCell: function (td, cellData, rowData, row, col) {
                    if (cellData == undefined || cellData == null || cellData === "") { $(td).html("--"); }
                }
            }],
            columns: [ // 列信息配置, data对应数据绑定的名称，name别名对应排序时的名称，建议保持一致
                { data: null, orderable: false,
                    render: function (data, type, row, meta) {
                        return parseInt(meta.settings._iDisplayStart) + parseInt(meta.row) + 1;
                    }
                },
                { data: "nickName", name: "nick_name"},
                { data: "userName", name: "user_name"},
                { data: "mobile", name: "mobile"},
                { data: "email", name: "email"},
                { data: "level", name: "level"},
                { data: "createDate", name: "create_date"},
                { data: "updateDate", name: "update_date"},
                { data: null, orderable: false, width: 150,
                    render: function (data, type, row, meta) {
                        var html = "";
                        html += "<button id='btn_view' title='查看' style='width:40px!important;' class='btn btn-info btn-xs' param-id='"+data.id+"'><i class='fa fa-eye'></i></button>&emsp;";
                        html += "<button id='btn_edit' title='编辑' style='width:40px!important;' class='btn btn-warning btn-xs' param-id='"+data.id+"'><i class='fa fa-pencil'></i></button>&emsp;";
                        html += "<button id='btn_ctrl' title='禁用' style='width:40px!important;' class='btn btn-danger btn-xs' param-id='"+data.id+"'><i class='fa fa-ban'></i></button>";
                        return html;
                    }
                },
                { data: "id", name: "id", visible: false } // 隐藏列
            ],
            initComplete: function(settings, json) {
                // Init complete...
            },
            drawCallback: function( settings ) {
                $("[title]").tooltip({
                    placement: 'top'
                });
            }
        });

    });

    // 重新加载
    function reload(){
        dataTable.ajax.reload( null, true );
    }

    // 搜索
    $("#btn_search").click(function(){
        reload();
    });

    // 重置
    $("#btn_reset").click(function(){
        $("#searchTable").find("input").val("");
        $("#searchTable").find("select").val("");
        reload();
    });

    // 绑定"查看"按钮单击事件
    $(document).on("click", "#btn_view", function(){
        var id = $(this).attr("param-id");
        location.href = "/user/view?id=" + id;
    }).on("click", "#btn_edit", function(){
        var id = $(this).attr("param-id");
        location.href = "/user/edit?id=" + id;
    }).on("click", "#btn_ctrl", function(){
        var id = $(this).attr("param-id");
        bootboxConfirm("确认要禁用吗？", function(result){
            if (result) {
                //location.href = "/user/enable?id=" + id;
            }
        });

    });
</script>
</body>
</html>